<template>
    <nav class="navbar navbar-expand-lg bg-body-tertiary" style="background-color: #e3f2fd;">
    <div class="container">
        <router-link class="navbar-brand" :to="{name:'home'}">Gomoku</router-link>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <router-link :class="route_name == 'pk' ? 'nav-link active' : 'nav-link'" aria-current="page" :to="{name:'PkIndexView'}">对战</router-link>
                </li>
                <li class="nav-item">
                    <router-link :class="route_name == 'record' ? 'nav-link active' : 'nav-link'" :to="{name:'RecordIndexView'}">对战记录</router-link>
                </li>
                <li class="nav-item">
                    <router-link :class="route_name == 'ranklist' ? 'nav-link active' : 'nav-link'" :to="{name:'RankListIndexView'}">排行榜</router-link>
                </li>
            </ul>
            <ul class="navbar-nav"  v-if="$store.state.user.is_login">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        {{$store.state.user.username}}
                    </a>
                    <ul class="dropdown-menu">
                        <li><router-link class="dropdown-item" :to="{name:'user_ownspace'}">个人空间</router-link></li>
                        <li><router-link class="dropdown-item" :to="{name:'user_AI'}">自我修炼</router-link></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#" @click="logout">退出登录</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="navbar-nav" v-else-if="!$store.state.user.pulling_info">
                <li class="nav-item">
                <router-link class="nav-link" :to="{name:'user_account_login'}" role="button">
                    登录
                </router-link>
                </li>
                <li>
                <router-link class="nav-link" :to="{name:'user_account_register'}" role="button">
                    注册
                </router-link>
                </li>
            </ul>
        </div>
    </div>
    </nav>
</template>

<script>
import {computed} from "vue"
import {useRoute} from "vue-router"
import {useStore} from "vuex"

export default {
    setup (){
        const route = useRoute();
        const store = useStore();

        let route_name = computed( ()=> route.name)
        const logout =() =>{
            store.dispatch("logout");
        }
        return {
            route_name,
            logout
        }
    }

}
</script>

<style>

</style>